{% extends 'base.html' %}
{% load static %}

{% block title %}Price History - NEPSE Stock Forecasting{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- Header -->
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900">📈 NEPSE Price History</h1>
        <p class="text-gray-600 mt-2">Real-time stock price data from ShareSansar and MeroLagani</p>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-chart-line text-indigo-600 text-2xl"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Total Stocks</dt>
                            <dd class="text-lg font-medium text-gray-900">{{ stats.total_stocks }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-database text-green-600 text-2xl"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Total Records</dt>
                            <dd class="text-lg font-medium text-gray-900">{{ stats.total_records|floatformat:0 }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-calendar text-blue-600 text-2xl"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Date Range</dt>
                            <dd class="text-lg font-medium text-gray-900">{{ stats.date_range_days }} days</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-clock text-purple-600 text-2xl"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Latest Update</dt>
                            <dd class="text-lg font-medium text-gray-900">{{ stats.latest_update }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="bg-white shadow rounded-lg p-6 mb-8">
        <h2 class="text-lg font-medium text-gray-900 mb-4">🔍 Filter Data</h2>
        
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div>
                <label for="stockFilter" class="block text-sm font-medium text-gray-700">Stock Symbol</label>
                <select id="stockFilter" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
                    <option value="">All Stocks</option>
                    {% for stock in stocks %}
                    <option value="{{ stock.symbol }}">{{ stock.symbol }} - {{ stock.company_name }}</option>
                    {% endfor %}
                </select>
            </div>

            <div>
                <label for="startDate" class="block text-sm font-medium text-gray-700">Start Date</label>
                <input type="date" id="startDate" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
            </div>

            <div>
                <label for="endDate" class="block text-sm font-medium text-gray-700">End Date</label>
                <input type="date" id="endDate" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
            </div>

            <div>
                <label for="limitRecords" class="block text-sm font-medium text-gray-700">Records Limit</label>
                <select id="limitRecords" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
                    <option value="50">50 records</option>
                    <option value="100" selected>100 records</option>
                    <option value="250">250 records</option>
                    <option value="500">500 records</option>
                </select>
            </div>
        </div>

        <div class="mt-4 flex space-x-3">
            <button id="applyFilters" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                <i class="fas fa-filter mr-2"></i>
                Apply Filters
            </button>
            <button id="clearFilters" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                <i class="fas fa-times mr-2"></i>
                Clear Filters
            </button>
            <button id="exportData" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                <i class="fas fa-download mr-2"></i>
                Export CSV
            </button>
        </div>
    </div>

    <!-- Chart Section -->
    <div class="bg-white shadow rounded-lg p-6 mb-8" id="chartSection" style="display: none;">
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-lg font-medium text-gray-900">📊 Price Chart</h2>
            <div class="flex space-x-2">
                <button id="chartTypePrice" class="px-3 py-1 text-sm bg-indigo-100 text-indigo-700 rounded-md">Price</button>
                <button id="chartTypeVolume" class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200">Volume</button>
                <button id="chartTypeOHLC" class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200">OHLC</button>
            </div>
        </div>
        <div class="h-96">
            <canvas id="priceChart"></canvas>
        </div>
    </div>

    <!-- Summary Stats for Filtered Data -->
    <div class="bg-white shadow rounded-lg p-6 mb-8" id="summaryStats" style="display: none;">
        <h2 class="text-lg font-medium text-gray-900 mb-4">📋 Summary Statistics</h2>
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4" id="summaryContent">
            <!-- Content will be populated by JavaScript -->
        </div>
    </div>

    <!-- Data Table -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-medium text-gray-900">📋 Price Data</h2>
            <p class="text-sm text-gray-600 mt-1" id="tableDescription">Latest stock price data from NEPSE</p>
        </div>
        
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200" id="priceTable">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Symbol</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Open</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">High</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Low</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Close</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Change</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Volume</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Turnover</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200" id="priceTableBody">
                    <!-- Data will be populated by JavaScript -->
                </tbody>
            </table>
        </div>
        
        <div class="px-6 py-4 border-t border-gray-200 bg-gray-50">
            <div class="flex items-center justify-between">
                <div class="text-sm text-gray-700" id="recordCount">
                    Loading data...
                </div>
                <div class="flex space-x-2">
                    <button id="refreshData" class="inline-flex items-center px-3 py-2 border border-gray-300 text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                        <i class="fas fa-sync-alt mr-2"></i>
                        Refresh
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Loading Spinner -->
<div id="loading" class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-50" style="display: none;">
    <div class="bg-white rounded-lg p-6 flex items-center space-x-3">
        <svg class="animate-spin h-5 w-5 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
        </svg>
        <span class="text-gray-700">Loading data...</span>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
let currentData = [];
let priceChart = null;

document.addEventListener('DOMContentLoaded', function() {
    initializePriceHistory();
    setupEventListeners();
    loadInitialData();
});

function initializePriceHistory() {
    // Set default date range (last 30 days)
    const today = new Date();
    const thirtyDaysAgo = new Date(today.getTime() - (30 * 24 * 60 * 60 * 1000));
    
    document.getElementById('endDate').value = today.toISOString().split('T')[0];
    document.getElementById('startDate').value = thirtyDaysAgo.toISOString().split('T')[0];
}

function setupEventListeners() {
    document.getElementById('applyFilters').addEventListener('click', loadPriceData);
    document.getElementById('clearFilters').addEventListener('click', clearFilters);
    document.getElementById('refreshData').addEventListener('click', loadPriceData);
    document.getElementById('exportData').addEventListener('click', exportToCSV);
    
    // Chart type buttons
    document.getElementById('chartTypePrice').addEventListener('click', () => updateChart('price'));
    document.getElementById('chartTypeVolume').addEventListener('click', () => updateChart('volume'));
    document.getElementById('chartTypeOHLC').addEventListener('click', () => updateChart('ohlc'));
}

function loadInitialData() {
    loadPriceData();
}

async function loadPriceData() {
    showLoading();
    
    try {
        const symbol = document.getElementById('stockFilter').value;
        const startDate = document.getElementById('startDate').value;
        const endDate = document.getElementById('endDate').value;
        const limit = document.getElementById('limitRecords').value;
        
        const params = new URLSearchParams();
        if (symbol) params.append('symbol', symbol);
        if (startDate) params.append('start_date', startDate);
        if (endDate) params.append('end_date', endDate);
        if (limit) params.append('limit', limit);
        
        const response = await fetch(`/api/price-history/?${params}`);
        const result = await response.json();
        
        if (result.status === 'success') {
            currentData = result.data;
            updateTable(result.data);
            
            // Calculate summary stats from the data
            const stats = calculateSummaryStats(result.data);
            updateSummaryStats(stats);
            
            updateChart('price');
            
            // Create filters object for table description
            const filters = { symbol, start_date: startDate, end_date: endDate, limit };
            updateTableDescription(filters, stats);
        } else {
            showNotification('Error loading price data', 'error');
        }
        
    } catch (error) {
        console.error('Error loading price data:', error);
        showNotification('Error loading price data', 'error');
    } finally {
        hideLoading();
    }
}

function calculateSummaryStats(data) {
    if (!data || data.length === 0) {
        return {
            total_records: 0,
            price_range: { highest: 0, lowest: 0 },
            volume_stats: { total: 0, average: 0 }
        };
    }
    
    const prices = data.map(d => d.close_price).filter(p => p != null);
    const volumes = data.map(d => d.volume).filter(v => v != null);
    
    const highest = Math.max(...prices);
    const lowest = Math.min(...prices);
    const totalVolume = volumes.reduce((sum, vol) => sum + vol, 0);
    const averageVolume = volumes.length > 0 ? totalVolume / volumes.length : 0;
    
    return {
        total_records: data.length,
        price_range: { highest, lowest },
        volume_stats: { total: totalVolume, average: averageVolume }
    };
}

function updateTable(data) {
    const tbody = document.getElementById('priceTableBody');
    tbody.innerHTML = '';
    
    if (data.length === 0) {
        tbody.innerHTML = '<tr><td colspan="9" class="px-6 py-4 text-center text-gray-500">No data available</td></tr>';
        return;
    }
    
    data.forEach(record => {
        const row = document.createElement('tr');
        row.className = 'hover:bg-gray-50';
        
        // Handle null values safely
        const openPrice = record.open_price ? record.open_price.toFixed(2) : 'N/A';
        const highPrice = record.high_price ? record.high_price.toFixed(2) : 'N/A';
        const lowPrice = record.low_price ? record.low_price.toFixed(2) : 'N/A';
        const closePrice = record.close_price ? record.close_price.toFixed(2) : 'N/A';
        
        // Handle change values (use correct property names from API)
        const changeAmount = record.change_amount;
        const changePercent = record.change_percent;
        
        let changeDisplay = 'N/A';
        let changeClass = 'text-gray-500';
        let changeIcon = '';
        
        if (changeAmount !== null && changeAmount !== undefined && changePercent !== null && changePercent !== undefined) {
            changeClass = changeAmount >= 0 ? 'text-green-600' : 'text-red-600';
            changeIcon = changeAmount >= 0 ? '↗' : '↘';
            changeDisplay = `${changeIcon} ${changeAmount.toFixed(2)} (${changePercent.toFixed(2)}%)`;
        }
        
        row.innerHTML = `
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${record.symbol}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${record.date}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Rs. ${openPrice}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Rs. ${highPrice}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Rs. ${lowPrice}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Rs. ${closePrice}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm ${changeClass}">
                ${changeDisplay}
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${record.volume ? record.volume.toLocaleString() : 'N/A'}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Rs. ${record.turnover ? record.turnover.toLocaleString() : 'N/A'}</td>
        `;
        
        tbody.appendChild(row);
    });
    
    document.getElementById('recordCount').textContent = `Showing ${data.length} records`;
}

function updateSummaryStats(stats) {
    const summaryContent = document.getElementById('summaryContent');
    const summarySection = document.getElementById('summaryStats');
    
    if (stats && stats.total_records > 0) {
        summarySection.style.display = 'block';
        
        const highestPrice = stats.price_range.highest || 0;
        const lowestPrice = stats.price_range.lowest || 0;
        const totalVolume = stats.volume_stats.total || 0;
        const averageVolume = stats.volume_stats.average || 0;
        
        summaryContent.innerHTML = `
            <div class="text-center">
                <div class="text-2xl font-bold text-gray-900">Rs. ${highestPrice.toFixed(2)}</div>
                <div class="text-sm text-gray-500">Highest Price</div>
            </div>
            <div class="text-center">
                <div class="text-2xl font-bold text-gray-900">Rs. ${lowestPrice.toFixed(2)}</div>
                <div class="text-sm text-gray-500">Lowest Price</div>
            </div>
            <div class="text-center">
                <div class="text-2xl font-bold text-gray-900">${totalVolume.toLocaleString()}</div>
                <div class="text-sm text-gray-500">Total Volume</div>
            </div>
            <div class="text-center">
                <div class="text-2xl font-bold text-gray-900">${Math.round(averageVolume).toLocaleString()}</div>
                <div class="text-sm text-gray-500">Avg Volume</div>
            </div>
        `;
    } else {
        summarySection.style.display = 'none';
    }
}

function updateChart(type) {
    const chartSection = document.getElementById('chartSection');
    
    if (currentData.length === 0) {
        chartSection.style.display = 'none';
        return;
    }
    
    chartSection.style.display = 'block';
    
    // Update active button
    document.querySelectorAll('[id^="chartType"]').forEach(btn => {
        btn.className = 'px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200';
    });
    document.getElementById(`chartType${type.charAt(0).toUpperCase() + type.slice(1)}`).className = 'px-3 py-1 text-sm bg-indigo-100 text-indigo-700 rounded-md';
    
    const ctx = document.getElementById('priceChart').getContext('2d');
    
    if (priceChart) {
        priceChart.destroy();
    }
    
    // For charts, we want chronological order (oldest to newest)
    const chartData = [...currentData].reverse();
    const labels = chartData.map(d => d.date);
    
    let datasets = [];
    
    if (type === 'price') {
        datasets = [{
            label: 'Close Price',
            data: chartData.map(d => d.close_price),
            borderColor: 'rgb(79, 70, 229)',
            backgroundColor: 'rgba(79, 70, 229, 0.1)',
            fill: true,
            tension: 0.1
        }];
    } else if (type === 'volume') {
        datasets = [{
            label: 'Volume',
            data: chartData.map(d => d.volume),
            borderColor: 'rgb(16, 185, 129)',
            backgroundColor: 'rgba(16, 185, 129, 0.6)',
            type: 'bar'
        }];
    } else if (type === 'ohlc') {
        datasets = [
            {
                label: 'Open',
                data: chartData.map(d => d.open_price),
                borderColor: 'rgb(59, 130, 246)',
                backgroundColor: 'transparent'
            },
            {
                label: 'High',
                data: chartData.map(d => d.high_price),
                borderColor: 'rgb(16, 185, 129)',
                backgroundColor: 'transparent'
            },
            {
                label: 'Low',
                data: chartData.map(d => d.low_price),
                borderColor: 'rgb(239, 68, 68)',
                backgroundColor: 'transparent'
            },
            {
                label: 'Close',
                data: chartData.map(d => d.close_price),
                borderColor: 'rgb(79, 70, 229)',
                backgroundColor: 'transparent',
                borderWidth: 2
            }
        ];
    }
    
    priceChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: datasets
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                title: {
                    display: true,
                    text: `${type.toUpperCase()} Chart`
                },
                legend: {
                    display: true
                }
            },
            scales: {
                y: {
                    beginAtZero: false,
                    title: {
                        display: true,
                        text: type === 'volume' ? 'Volume' : 'Price (Rs.)'
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: 'Date'
                    }
                }
            }
        }
    });
}

function updateTableDescription(filters, stats) {
    let description = '';
    
    if (filters && filters.symbol) {
        description += `${filters.symbol} stock data`;
    } else {
        description += 'All stock data';
    }
    
    if (filters && filters.start_date && filters.end_date) {
        description += ` from ${filters.start_date} to ${filters.end_date}`;
    } else if (filters && filters.start_date) {
        description += ` from ${filters.start_date}`;
    } else if (filters && filters.end_date) {
        description += ` until ${filters.end_date}`;
    }
    
    // For now, we don't have date_range in stats, so we'll skip that part
    if (stats && stats.total_records) {
        description += ` (${stats.total_records} records)`;
    }
    
    const tableDescElement = document.getElementById('tableDescription');
    if (tableDescElement) {
        tableDescElement.textContent = description;
    }
}

function clearFilters() {
    document.getElementById('stockFilter').value = '';
    document.getElementById('startDate').value = '';
    document.getElementById('endDate').value = '';
    document.getElementById('limitRecords').value = '100';
    loadPriceData();
}

function exportToCSV() {
    if (currentData.length === 0) {
        showNotification('No data to export', 'warning');
        return;
    }
    
    const headers = ['Symbol', 'Date', 'Open', 'High', 'Low', 'Close', 'Change', 'Change%', 'Volume'];
    const csvContent = [
        headers.join(','),
        ...currentData.map(record => [
            record.symbol,
            record.date,
            record.open_price || 'N/A',
            record.high_price || 'N/A',
            record.low_price || 'N/A',
            record.close_price || 'N/A',
            record.change_amount || 'N/A',
            record.change_percent || 'N/A',
            record.volume || 'N/A'
        ].join(','))
    ].join('\n');
    
    const blob = new Blob([csvContent], { type: 'text/csv' });
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `nepse_price_history_${new Date().toISOString().split('T')[0]}.csv`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
    
    showNotification('Data exported successfully', 'success');
}

function showLoading() {
    document.getElementById('loading').style.display = 'flex';
}

function hideLoading() {
    document.getElementById('loading').style.display = 'none';
}

function showNotification(message, type) {
    // Simple notification system
    const notification = document.createElement('div');
    notification.className = `fixed top-4 right-4 p-4 rounded-md shadow-md z-50 ${
        type === 'success' ? 'bg-green-100 text-green-800' :
        type === 'error' ? 'bg-red-100 text-red-800' :
        'bg-yellow-100 text-yellow-800'
    }`;
    notification.textContent = message;
    
    document.body.appendChild(notification);
    
    setTimeout(() => {
        document.body.removeChild(notification);
    }, 3000);
}
</script>
{% endblock %}